<template>

  <h1 class="tts">文字变色动画</h1>
  <button @click="add">动态添加路由 /member</button>
  <hr>
  <router-link to="/home">首页</router-link>
  <router-link to="/member">会员/member</router-link>
  <router-link to="/st">学生/st</router-link>
  <br>

  <hr>
  <router-view v-slot="{ Component }">
    <transition name="fade-transform" mode="out-in">
      <keep-alive>
        <div :key="$route.path">
          <component :is="Component"/>
        </div>
      </keep-alive>
    </transition>
  </router-view>
</template>


<script lang="ts" setup>
import {useRouter} from "vue-router"

const router = useRouter()

function add() {

  router.beforeEach((to, from, next) => {
    if (to.meta.title) {
      document.title = to.meta.title.toString()
    } else {
      document.title = ''
    }
    next()
  })

  console.log(router.getRoutes())

  //删除
  router.removeRoute('st')

  console.log(router.getRoutes())

  //添加路由
  router.addRoute({
    path: '/member',
    meta: {title: '会员中心'},
    // /views/member.vue
    component: () => import('@/views/member.vue'),
  })
  console.log(router.getRoutes())
}
</script>


<style>
a {
  padding: 5px;
  margin: 10px;
}

@keyframes aa {
  from {
    color: red
  }
  to {
    color: blue
  }
}

@keyframes a2 {
  10% {
    color: red
  }
  20% {
    color: green
  }
  30% {
    color: blue;
    transform: rotate(30deg);
  }
  40% {
    color: orange
  }
}

@keyframes a3 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.tt {
  width: 300px;
  text-align: center;
  background-color: #f00;
  transform-origin: center center;
  animation: a3 2s ease-in infinite;
}

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
